﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小票打印</title>

<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/main.css">

<script src="js/3rd/jquery-1.7.2.js"></script>
<script src="js/3rd/Underscore-1.8.2.js"></script>
<script src="js/ticketPrint.js"></script>

<style>
	.table_moni td{padding:5px;}
	.ipt{width:50px;}
</style>

</head>

<body style="padding:10px;">

    <div class="cf mb20" style="border-bottom:1px solid #D3D3D3;padding-bottom:20px;">
        <div class="f_left index_left w500" style="border-right:1px solid #D3D3D3;margin-right:20px;">
            <p style="padding-bottom:10px;color:red;">注：“扫描一次”增加一条记录，输入数字回车扫描对应次</p>
            <table class="table_moni" width="100%">
                <tr>
                    <td style="width:4em">可口可乐</td>
                    <td style="width:5em"><input class="js_scanning" data-val="0" type="button" value="扫描一次"></td>
                    <td>一次扫描<input type="text" data-val="0" class="ipt js_ipt" maxlength="2">次</td>
                    <td>没有优惠</td>
                </tr>
                <tr>
                    <td>羽毛球</td>
                    <td><input class="js_scanning" data-val="1" type="button" value="扫描一次"></td>
                    <td>一次扫描<input type="text" data-val="1" class="ipt js_ipt" maxlength="2">次</td>
                    <td>满2免1，95折</td>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td><input class="js_scanning" data-val="2" type="button" value="扫描一次"></td>
                    <td>一次扫描<input type="text" data-val="2" class="ipt js_ipt" maxlength="2">次</td>
                    <td>满2免1</td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td><input class="js_scanning" data-val="3" type="button" value="扫描一次"></td>
                    <td>一次扫描<input type="text" data-val="3" class="ipt js_ipt" maxlength="2">次</td>
                    <td>95折</td>
                </tr>
            </table>
        </div>
        <div class="">
            <p>得到的扫描条码</p>
            <div id="js_code" class="of"></div>
        </div>
    </div>

    <p class="align_center">
        <input type="button" id="js_calculate" value="计算小票">
        <input type="button" id="js_reset" value="重置"> 
    </p>

    <script>
        /**
        * 模拟扫描
        */
        //扫描一次
        var coods = [];
        $(".js_scanning").on("click", function () {
            var $this = $(this);
            var val = parseInt($this.attr("data-val"));
            var code = "";
            switch (val) {
                case 0:
                    code = "ITEM000001";
                    break;
                case 1:
                    code = "ITEM000003";
                    break;
                case 2:
                    code = "ITEM000005";
                    break;
                case 3:
                    code = "ITEM000006";
                    break;
            }

            coods.push(code);
            $("#js_code").html(coods.join("，"));
        });

        //一次扫描多个
        $(".js_ipt").on("keyup", function (e) {
            var $this = $(this);
            var key = e.which;
            if (key == 13) {
                var val = parseInt($this.attr("data-val"));
                var value = parseInt($this.val());
                if (value && value > 0) {
                    var code = "";
                    switch (val) {
                        case 0:
                            code = "ITEM000001-" + value;
                            break;
                        case 1:
                            code = "ITEM000003-" + value;
                            break;
                        case 2:
                            code = "ITEM000005-" + value;
                            break;
                        case 3:
                            code = "ITEM000006-" + value;
                            break;
                    }

                    coods.push(code);
                    $("#js_code").html(coods.join("，"));
                }
            }
        });

        //重置
        $("#js_reset").on("click", function () {
            window.location.reload();
        })

        //输出打印结果
        $("#js_calculate").on("click", function () {
            if (coods.length) {//有扫描条码时才输出结果
                ticketPrint.getInfo(coods);
            } else {
                $("#js_content").html("没有扫描商品！");
            }

        });
    </script>

    <div id="js_content" class="w500 m_center" style="padding:20px;"></div>

</body>
</html>
